<template>
    <div class="layout-nav" v-if="breadData">
        <div class="breadcrumb">
            <div class="pageName">{{breadData.pageName}}</div>   
            <div class="list-con" v-show="breadData.list && breadData.list.length > 0" >           
                <template v-for="item in breadData.list">
                    <span class="breadcrumb-item">
                        <router-link v-if="item.path" :to="item.path" replace>{{ item.name }}</router-link>
                        <span v-else>{{ item.name }}</span>
                        <span class="breadcrumb-separator">/</span>
                    </span>
                </template>
            </div>
            <div v-show="breadData.tabs && breadData.tabs.length > 0">
                <el-tabs @tab-click="handleClick" v-model="activeName">
                    <el-tab-pane v-for="item in breadData.tabs" :label="item.label" :name="item.tab"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import '@/assets/less/modules/breadCrumb.less'
    import '@/assets/less/modules/tabs.less'
    export default {
        name: 'breadCrumb',
        data() {
            return {
                activeName: '0'
            }
        },
        computed: {
            breadData() {
                return this.$store.getters.breadData
            }
        },        
        methods: {
            handleClick(tab, event) {
                this.$store.commit('tabIndex',  tab.index);
            }
        } 
    }
</script>